<template>
  <el-dialog
    :title="title + '广告图'"
    :visible.sync="isShow"
    width="45%"
    @close="cancel"
  >
    <el-form
      ref="formRef"
      :rules="formRules"
      :model="formData"
      class="info-form"
      label-width="160px"
    >
      <el-form-item label="广告位" prop="advimgpos">
        <el-select
          @focus="loadAllPosition"
          v-model="formData.advimgpos"
          placeholder="请选择广告位"
          clearable
        >
          <el-option
            v-for="item in positionList"
            :key="item.id"
            :label="item.advposname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="广告图描述" prop="advimgdesc">
        <el-input
          style="width:400px;"
          size="medium"
          v-model="formData.advimgdesc"
          placeholder="请输入广告图描述"
          type="textarea"
          :rows="2"
        ></el-input>
      </el-form-item>
      <el-form-item label="广告图链接" prop="advimglink">
        <el-input
          style="width:400px;"
          size="medium"
          v-model="formData.advimglink"
          placeholder="请输入广告图链接"
        ></el-input>
      </el-form-item>

      <el-form-item label="广告图" prop="advimgsrc">
        <image-upload
          v-model="formData.advimgsrc"
          field-name="file"
          :limit="1"
          :upload-fn="uploadFile"
        ></image-upload>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/adv/img'
import { getAllData as getAllPositionData } from '@/api/adv/pos'
import { uploadFile } from '@/api'
import { deepClone } from '@/utils'
const formRules = {
  advimgdesc: [{ required: true, message: '描述类型必须！', trigger: 'blur' }],
  advimglink: [
    { required: true, message: '链接类型必须！', trigger: 'blur' },
    {
      required: true,
      message: '链接类型必须！',
      trigger: 'blur'
    }
  ],
  advimgpos: [
    { required: true, message: '广告位类型必须！', trigger: 'change' }
  ],
  advimgsrc: [
    {
      type: 'array',
      required: true,
      message: '请至少选择一个活动性质',
      trigger: 'change'
    }
  ]
}
const defaultItem = {
  advimgdesc: '', // 广告图描述
  advimglink: '', // 广告图链接
  advimgpos: '', // 广告图位
  advimgsrc: [] // 广告图
}
export default {
  name: 'imgInfo',
  data () {
    return {
      isShow: false,
      isAdd: true,
      formData: deepClone(defaultItem),
      formRules,
      // 所有广告位
      positionList: []
    }
  },
  computed: {
    title () {
      return this.isAdd ? '添加' : '修改'
    }
  },
  methods: {
    uploadFile,
    async loadAllPosition () {
      this.positionList = await getAllPositionData()
    },
    //  获取单行信息回显
    async getInfo (id) {
      this.formData = await getInfoData(id)
      this.formData.advimgsrc = this.formData.advimgsrc
        ? this.formData.advimgsrc.split(',')
        : []
      this.isAdd = false
      this.isShow = true
    },
    //  增加或更新提交
    async submit () {
      //  验证
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning('验证失败')
      }
      // 处理
      const formData = JSON.parse(JSON.stringify(this.formData))
      formData.advimgsrc = formData.advimgsrc.length
        ? formData.advimgsrc.join()
        : null
      //  提交
      if (this.isAdd) {
        await addData(formData)
        this.$message.success('添加成功')
      } else {
        await updateData(formData)
        this.$message.success('修改成功')
      }
      // 更新列表
      this.$emit('update-list')
      // 关闭
      this.cancel()
    },
    cancel () {
      this.isShow = false
      this.isAdd = true
      this.formData = deepClone(defaultItem)
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped></style>
